<route>
{
"meta":{
"title":"消息通知",
"localism": "sys.message_notification"
}
}
</route>

<template>
  <div>
    <div class="table-operator">
      <el-button
        :disabled="!selectedRowKeys.length"
        type="primary"
        icon="delete"
        @click="handleBatchDel"
      >{{ $t("sys.batch_delete") }}
      </el-button
      >
      <el-button
        :disabled="!selectedRowKeys.length"
        type="primary"
        icon="flag"
        @click="handleBatchRead"
      >{{ $t("sys.mark_as_read") }}
      </el-button
      >
    </div>
    <el-table
      row-key="id"
      ref="table"
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      stripe
      border
      @selection-change="handleMsgSelect"
    >
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column prop="content" :label="$t('sys.message')">
        <template slot-scope="scope">
          <img :src="newIcon" v-if="!scope.row.readStatus"/>
          <el-tooltip
            placement="top"
            effect="light"
            :content="scope.row.content"
          >
            <span
              v-if="JSON.parse(scope.row.parametersJson) &&
                (JSON.parse(scope.row.parametersJson).__formKey__ || JSON.parse(scope.row.parametersJson).__formView__)"
              style="color: #409eff"
              @click="handleInfo(scope.row)">{{
                scope.row.content | scriptValue(110)
              }}</span>
            <span v-else @click="handleInfo(scope.row)">{{scope.row.content | scriptValue(110) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" :label="$t('sys.time')" width="200">
        <template slot-scope="scope">
          {{ scope.row.createDate | moment }}
        </template>
      </el-table-column>

      <el-table-column prop="actions" :label="$t('sys.operation')" width="100">
        <template slot-scope="scope">
          <span class="table-actionItem">
            <el-popconfirm
              :title="$t('sys.confirm_to_delete_message')"
              placement="top"
              @confirm="handleDel(scope.row)"
            >
              <el-button type="text" slot="reference">{{
                  $t("sys.delete")
                }}</el-button>
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import newIcon from "@/assets/icon/new.png";

import {
  getMsgWebmessageMypagelist,
  deleteMsgWebmessage,
  putMsgWebmessageRead,
  getMsgWebmessageUnreadCount,
} from "@/apis/paas/MsgWebMessageController.js";
import {getHmprocessruntimeTaskFinished} from "@/apis/paas/HmProcessRuntimeController.js";

export default {
  name: "MessageView",
  components: {},

  watch: {},

  data() {
    return {
      newIcon,
      loading: false,
      notificationType: null,
      selectedRowKeys: [],
      selectedRows: [],
      tableData: [],
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      total: 0,
    };
  },
  computed: {
    ...mapGetters(["getMsgNum"]),
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.loadData();
    },
    getMsgWebmessageUnreadCount() {
      getMsgWebmessageUnreadCount().then((res) => {
        this.$store.commit("SET_MSG_NUM", res);
      });
    },
    loadData(pageNo = this.pageData.pageNo) {
      this.loading = true;
      getMsgWebmessageMypagelist({
        ...this.queryParams,
        ...this.pageData,
        pageNo,
      })
        .then((res) => {
          if (res.data.length === 0 && pageNo > 1) {
            this.loadData(pageNo - 1);
            return;
          }
          this.tableData = res.data;
          this.total = res.totalCount;
          this.pageData = {
            pageSize: res.pageSize,
            pageNo: res.pageNo,
          };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleMsgSelect(val) {
      this.selectedRowKeys = val;
    },
    handleBatchDel() {
      if (this.selectedRowKeys.length) {
        const ids = this.selectedRowKeys.map((item) => item.id);
        deleteMsgWebmessage({ids: ids.join(",")}).then((res) => {
          this.$message.success(this.$t("sys.operation_success"));
          this.loadData();
          this.getMsgWebmessageUnreadCount();
          this.selectedRowKeys = [];
        });
      }
    },
    handleBatchRead() {
      if (this.selectedRowKeys.length) {
        const idList = this.selectedRowKeys.map((item) => item.id);
        putMsgWebmessageRead({idList}).then((res) => {
          this.$message.success(this.$t("sys.operation_success"));
          this.loadData();
          this.getMsgWebmessageUnreadCount();
          this.selectedRowKeys = [];
        });
      }
    },

    handleReadSubmit(idList) {
      const params = {
        idList,
      };
      putMsgWebmessageRead(params).then((res) => {
        // this.$message.success(res.message)
        this.loadData();
        this.getMsgWebmessageUnreadCount();
      });
    },

    handleDel(record) {
      deleteMsgWebmessage({ids: record.id}).then((res) => {
        this.$message.success(this.$t("sys.operation_success"));
        this.loadData();
        if (!record.readStatus) {
          this.$store.commit("SET_MESSAGE_COUNT", this.getMsgNum - 1);
        }
      });
    },
    async handleInfo(info) {
      if (!info.readStatus) {
        this.handleReadSubmit([info.id]);
      }
      const formConfig = JSON.parse(info.parametersJson);
      const {__formKey__, __formView__, __task_id__, __data_id__, __todoParams__, __viewParams__ } =
        formConfig;
      const taskId = __task_id__;
      const todoObj = __todoParams__ ? JSON.parse(__todoParams__) : {}
      const viewObj = __viewParams__? JSON.parse(__viewParams__) : {}
      if (__formKey__) {
        // 判断任务是否完成
        const res = await getHmprocessruntimeTaskFinished({taskId});
        if (res === false) {
          this.$router.push({
            name: "app-audit-audit",
            query: {taskId, pageKey: __formKey__, id: __data_id__, ...todoObj},
          });
        } else {
          if (__formView__) {
            this.$router.push({
              name: "app-audit-audit",
              query: {
                taskId,
                pageKey: __formView__,
                id: __data_id__,
                done: "1",
                view: "1",
                ...viewObj
              },
            });
          } else {
            this.$notify({
              title: this.$t("sys.tips"),
              message: this.$t("sys.message_completed_check_on_app"),
              type: "warning",
            });
          }
        }
      } else if (__formView__) {
        this.$router.push({
          name: "app-audit-audit",
          query: {
            taskId,
            pageKey: __formView__,
            id: __data_id__,
            done: "1",
            view: "1",
            ...viewObj
          },
        });
      }
    },
  },
};
</script>

<style scoped>
</style>
